<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;

        }
        div{
            width: 200px;
            height: 200px;
            background: skyblue;position: absolute;
        }
    </style>
</head>
<br>
sdsaaaaaaaaaaaaaaaaaaaaaa<br/>
sdsaaaaaaaaaaaaaaaaaaaaaa
sdsaaaaaaaaaaaaaaaaaaaaaa<br/>
sdsaaaaaaaaaaaaaaaaaaaaaa
sdsaaaaaaaaaaaaaaaaaaaaaa<br/>
sdsaaaaaaaaaaaaaaaaaaaaaa
  <div id="div1">sdsaaaaaaaaaaaaasdsaaaaaaaaaaaaaaaaaaaaaa<br/>
      sdsaaaaaaaaaaaaaaaaaaaaaasdsaaaaaaaaaaaaaaaaaaaaaa<br/>
      sdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
sdsaaaaaaaaaaaaaaaaaaaaaa<br/>
sdsaaaaaaaaaaaaaaaaaaaaaasdsaaaaaaaaaaaaaaaaaaaaaa<br/>
sdsaaaaaaaaaaaaaaaaaaaaaa
  <script>
      var oDiv = document.getElementById('div1');
      var disX = 0;
      var disY =0;
      oDiv.onmousedown = function (ev) {
         var oEvent = ev || event;
         disX = oEvent.clientX - oDiv.offsetLeft;
         disY = oEvent.clientY - oDiv.offsetTop;
          document.onmousemove = function (ev) {//拖拽的行为发生在onmousedown里面
              var oEvent = ev || event;

              var left = oEvent.clientX-disX;
              var top = oEvent.clientY-disY;

              if(left<0){ //用户体验
                  left=0;
              }
              else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){//继续向右边滑动的时候就不是oDiv.style.width了，而是offsetWidth
                  left=document.documentElement.clientWidth-oDiv.offsetWidth
              }
              if (top<0){
                  top = 0;
              }
              else if(top>document.documentElement.clientHeight-oDiv.offsetHeight){
                  top=document.documentElement.clientHeight-oDiv.oDiv.offsetHeight
              }
              oDiv.style.left =left +'px';
              oDiv.style.top = top+'px';



          };
          document.onmouseup = function () {
              document.onmousemove= null;
              document.onmouseup = null;
          };

          return false;//阻止火狐的默认事件---鼠标按下的时候会自动创建一个新的div
      };
  </script>
</body>
</html>